<template>
	<view class="page-container">
		<!-- 新闻分类区域 -->
		<view class="section-container">
			<view class="section-title bg-blue">新闻</view>
			<view class="section-content">
				<view class="item-card" @click="goDetailPage('cardView')">
					<view class="item-icon icon-top-news"></view>
					<text class="item-text">置顶新闻页面</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('news')">
					<view class="item-icon icon-three-news"></view>
					<text class="item-text">三合一新闻页面</text>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>

		<!-- 容器分类区域 -->
		<view class="section-container">
			<view class="section-title bg-green">1. 容器</view>
			<view class="section-content">
				<view class="item-card" @click="goDetailPage('view')">
					<view class="item-icon icon-view"></view>
					<text class="item-text">view视图</text>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>

		<!-- 基础内容分类区域 -->
		<view class="section-container">
			<view class="section-title bg-purple">2. 基础内容</view>
			<view class="section-content">
				<view class="item-card" @click="goDetailPage('text')">
					<view class="item-icon icon-text"></view>
					<text class="item-text">text文本编辑</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('icon')">
					<view class="item-icon icon-icon"></view>
					<text class="item-text">icon图标</text>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>

		<!-- 表单组件分类区域 -->
		<view class="section-container">
			<view class="section-title bg-orange">3. 表单组件</view>
			<view class="section-content">
				<view class="item-card" @click="goDetailPage('button')">
					<view class="item-icon icon-button"></view>
					<text class="item-text">button按钮</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('checkbox')">
					<view class="item-icon icon-checkbox"></view>
					<text class="item-text">checkbox多选框</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('label')">
					<view class="item-icon icon-label"></view>
					<text class="item-text">label标签组件</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('input')">
					<view class="item-icon icon-input"></view>
					<text class="item-text">input输入框</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('textarea')">
					<view class="item-icon icon-textarea"></view>
					<text class="item-text">textarea多行文本输入框</text>
					<view class="item-arrow"></view>
				</view>
				<view class="item-card" @click="goDetailPage('form')">
					<view class="item-icon icon-form"></view>
					<text class="item-text">form表单</text>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>

		<!-- 导航组件分类区域 -->
		<view class="section-container">
			<view class="section-title bg-red">4. 导航组件</view>
			<view class="section-content">
				<view class="item-card" @click="goDetailPage('navigator')">
					<view class="item-icon icon-navigator"></view>
					<text class="item-text">navigator</text>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			goDetailPage(e) {
				// 处理 cardView 跳转（置顶新闻）
				if (e === 'cardView') {
					uni.navigateTo({
						url: '/pages/cardView/cardView',
						fail: (err) => console.log('跳转失败：', err)
					});
					return;
				}

				// 处理 news 跳转（三合一新闻）
				if (e === 'news') {
					uni.navigateTo({
						url: '/pages/news/news',
						fail: (err) => console.log('跳转失败：', err)
					});
					return;
				}

				// 其他组件的通用跳转
				if (typeof e === 'string') {
					uni.navigateTo({
						url: '/pages/components/' + e + '/' + e,
						fail: (err) => console.log('跳转失败：', err)
					});
				} else {
					uni.navigateTo({
						url: e.url,
						fail: (err) => console.log('跳转失败：', err)
					});
				}
			}
		}
	}
</script>

<style scoped>
	/* 页面整体容器 */
	.page-container {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx;
	}

	/* 分类区域容器 */
	.section-container {
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
	}

	/* 分类标题 */
	.section-title {
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 600;
		padding: 20rpx 25rpx;
	}

	/* 分类内容区域 */
	.section-content {
		padding: 10rpx 0;
	}

	/* 列表项卡片 */
	.item-card {
		display: flex;
		align-items: center;
		padding: 20rpx 25rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.2s ease;
	}

	/* 列表项点击态 */
	.item-card:active {
		background-color: #f8f9fa;
	}

	/* 列表项图标容器 */
	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 24rpx;
	}

	/* 列表项文本 */
	.item-text {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	/* 箭头图标 */
	.item-arrow {
		width: 16rpx;
		height: 16rpx;
		border-top: 3rpx solid #999999;
		border-right: 3rpx solid #999999;
		transform: rotate(45deg);
	}

	/* 颜色主题 */
	.bg-blue {
		background-color: #4299e1; /* 蓝色 - 新闻区域 */
	}

	.bg-green {
		background-color: #48bb78; /* 绿色 - 容器区域 */
	}

	.bg-purple {
		background-color: #9f7aea; /* 紫色 - 基础内容区域 */
	}

	.bg-orange {
		background-color: #ed8936; /* 橙色 - 表单组件区域 */
	}

	.bg-red {
		background-color: #e53e3e; /* 红色 - 导航组件区域 */
	}

	/* 图标背景色（与分类标题对应） */
	.icon-top-news {
		background-color: #4299e1;
	}

	.icon-three-news {
		background-color: #4299e1;
	}

	.icon-view {
		background-color: #48bb78;
	}

	.icon-text {
		background-color: #9f7aea;
	}

	.icon-icon {
		background-color: #9f7aea;
	}

	.icon-button {
		background-color: #ed8936;
	}

	.icon-checkbox {
		background-color: #ed8936;
	}

	.icon-label {
		background-color: #ed8936;
	}

	.icon-input {
		background-color: #ed8936;
	}

	.icon-textarea {
		background-color: #ed8936;
	}

	.icon-form {
		background-color: #ed8936;
	}

	.icon-navigator {
		background-color: #e53e3e;
	}
</style>